<script setup>
import { pick } from 'lodash-es';
import { useRequest, useResetForm } from '@/hooks';
import { useTitleChange } from '../zdwh/hooks';
import { getType, getMeterTypeList, addMeterType, editMeterType, delMeterType } from '@/api/index.js';
import { Message, MessageBox } from 'element-ui';
import { TableList } from '@/components/MainComponents.js';

const appDom = ref(null);
const height = ref(0);

const meterForm = ref(null);
const visible = ref(false);
const [title, setTitle] = useTitleChange();
const formData = ref({
  deviceTypeName: null,
  energyTypeId: null,
});
const rules = ref({
  deviceTypeName: { required: true, message: '请输入计量表类型名称', trigger: 'blur' },
  energyTypeId: { required: true, message: '请选择计量能源类型', trigger: ['change', 'blur'] },
});
const engUnit = ref(null);
const engPrice = ref(null);

const handleAdd = () => {
  setTitle('新增');
  visible.value = true;
};
const handleEdit = row => {
  setTitle('编辑');
  visible.value = true;
  formData.value = pick(row, ['deviceTypeName', 'energyTypeId', 'deviceTypeId']);
  engUnit.value = row.energyTypeUnit;
  engPrice.value = row.energyTypeCostUnit;
};
const handleDelete = row => {
  MessageBox.confirm('是否确认删除', '提示', {
    confirmButtonText: '是',
    cancelButtonText: '否',
    type: 'warning',
  }).then(() => {
    runDel({ deviceTypeId: row.deviceTypeId });
  });
};
const columnObj = ref({
  index: true,
  columnData: [
    { text: true, prop: 'deviceTypeName', label: '计量表类型名称' },
    { text: true, prop: 'energyTypeName', label: '计量能源类型名称' },
    { text: true, prop: 'energyTypeUnit', label: '能源计量单位' },
    { text: true, prop: 'energyTypeCostUnit', label: '能源费用单位' },
    { text: true, prop: 'updateTime', label: '编辑时间' },
    {
      label: '操作',
      operations: [
        {
          type: 'text',
          label: '编辑',
          buttonClick: handleEdit,
        },
        {
          type: 'text',
          label: '删除',
          buttonClick: handleDelete,
        },
      ],
    },
  ],
});

const changeType = val => {
  engUnit.value = val.energyUnit;
  engPrice.value = val.energyPrice;
};
const submitForm = () => {
  meterForm.value.validate(valid => {
    if (!valid) return false;
    if (title.value === '新增') {
      MessageBox.confirm('请确认信息无误', '提示', {
        confirmButtonText: '是',
        cancelButtonText: '否',
        type: 'warning',
      }).then(() => {
        runAdd(formData.value);
      });
    }
    if (title.value === '编辑') {
      runEdit(formData.value);
    }
  });
};
const cancel = () => {
  useResetForm(meterForm);
  engUnit.value = null;
  engPrice.value = null;
  visible.value = false;
};

const onSuccess = res => {
  if (res.code === 200) {
    Message({ type: 'success', message: res.msg });
    cancel();
    runList({});
  }
};
const [engTypes] = useRequest(getType);
const [meterTypeList, loading, runList] = useRequest(getMeterTypeList, { defaultParams: [{}] });
const [, , runAdd] = useRequest(addMeterType, {
  manual: true,
  onSuccess: res => onSuccess(res),
});
const [, , runEdit] = useRequest(editMeterType, {
  manual: true,
  onSuccess: res => onSuccess(res),
});
const [, , runDel] = useRequest(delMeterType, {
  manual: true,
  onSuccess: res => onSuccess(res),
});

onMounted(() => {
  nextTick(() => {
    height.value = appDom.value.clientHeight - 99;
  });
});
</script>

<template>
  <div class="app-container u-base-fg u-p20" ref="appDom">
    <div class="u-df-ed u-mb20">
      <el-button type="primary" size="small" @click="handleAdd">添加计量表类型</el-button>
    </div>
    <TableList v-loading="loading" :tableData="meterTypeList ?? []" :columObj="columnObj" :max-height="height" />
    <el-dialog :visible.sync="visible" width="40%" :before-close="cancel" append-to-body>
      <div slot="title" class="dialog-title">
        <span class="tit">
          {{ title }} -
          <span class="u-prim-text">计量表类型</span>
        </span>
      </div>
      <el-form
        ref="meterForm"
        :model="formData"
        :rules="rules"
        label-width="150px"
        size="small"
        class="u-pl20 u-pr20 meterForm"
      >
        <el-form-item label="计量表类型名称：" prop="deviceTypeName">
          <el-input
            v-filter-input
            v-model.trim="formData.deviceTypeName"
            placeholder="请输入计量表类型名称"
            size="small"
            clearable
          />
        </el-form-item>
        <el-form-item label="计量能源类型：" prop="energyTypeId">
          <el-select
            v-model="formData.energyTypeId"
            placeholder="请选择计量能源类型"
            size="mini"
            class="u-w100"
            clearable
          >
            <el-option
              v-for="item in engTypes"
              :key="item.id"
              :label="item.energyName"
              :value="item.id"
              @click.native="changeType(item)"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="能源计量单位：">
          <span class="u-prim-text meterForm-showItem">{{ engUnit }}</span>
        </el-form-item>
        <el-form-item label="能源费用单位：">
          <span class="u-prim-text meterForm-showItem">{{ engPrice }}</span>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" size="small" plain @click="cancel">取 消</el-button>
        <el-button type="primary" size="small" @click="submitForm">保 存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<style lang="scss" scoped>
.meterForm-showItem {
  padding-left: 15px;
  font-size: 13px;
}
.meterForm :deep(.el-form-item) {
  margin-bottom: 18px;
  .el-form-item__content {
    height: 32px;
    line-height: 32px;
  }
}
</style>
